<template>
	<view class="form-container">
		<form @submit.prevent="submit">
			<view class="form-group">
				<label for="企业名称">企业名称</label>
				<input type="text" v-model="form.companyName" placeholder="请输入" class="input-field" required />
				<view class="error-message" v-if="!form.companyName">请填写企业名称</view>
			</view>

			<view class="form-group">
				<label for="法人">法人</label>

				<input type="text" v-model="form.companyLegal" placeholder="请输入" class="input-field" required />
				<view class="error-message" v-if="!form.companyLegal">请填写法人</view>
			</view>

			<view class="form-group">
				<label for="法人电话">法人电话</label>

				<input type="tel" v-model="form.companyLegalPhone" placeholder="请输入" class="input-field" required />
				<view class="error-message" v-if="!form.companyLegalPhone">请填写法人电话</view>
			</view>

			<view class="form-group">
				<label for="经办人">经办人</label>

				<input type="text" v-model="form.companyAgent" placeholder="请输入" class="input-field" required />
				<view class="error-message" v-if="!form.companyAgent">请填写经办人</view>
			</view>

			<view class="form-group">
				<label for="经办人电话">经办人电话</label>

				<input type="tel" v-model="form.companyAgentPhone" placeholder="请输入" class="input-field" required />
				<view class="error-message" v-if="!form.companyAgentPhone">请填写经办人电话</view>
			</view>

			<view class="form-group">
				<label for="企业营业执照">企业营业执照</label>

				<view class="uploader">
					<view class="upload-button" @tap="chooseImage">
						<text>上传图片</text>
					</view>
					<view class="uploaded-images">
						<image v-for="img in form.companyBusinessLicense" :key="img" :src="img" mode="aspectFill" />
					</view>
				</view>
			</view>

			<button type="primary" form-type="submit" class="submit-button">提交</button>
		</form>
	</view>
</template>

<script setup lang="ts">
	import { reactive, ref } from 'vue';
	// import { chooseImage, uploadFile } from '@dcloudio/uni-app';

	const form = reactive({
		companyName: '',
		companyLegal: '',
		companyLegalPhone: '',
		companyAgent: '',
		companyAgentPhone: '',
		companyBusinessLicense: [],
	});

	const submit = () => {
		if (form.companyName && form.companyLegal && form.companyLegalPhone && form.companyAgent && form.companyAgentPhone && form.companyBusinessLicense.length > 0) {
			console.log('submit!');
			// 这里可以添加提交表单的逻辑
		}
	};

	const chooseImage = () => {
		uni.chooseImage({
			count: 9 - form.companyBusinessLicense.length, // 最多可以选择的图片数量
			sizeType: ['original', 'compressed'],
			sourceType: ['album', 'camera'],
			success(res) {
				const tempFilePaths = res.tempFilePaths;
				for (let i = 0; i < tempFilePaths.length; i++) {
					uploadFile({
						url: 'your-upload-url', // 服务器上传接口地址
						filePath: tempFilePaths[i],
						name: 'file',
						formData: {},
						success(res) {
							// 图片上传成功后，将URL添加到表单数据中
							form.companyBusinessLicense.push(res.data);
						},
					});
				}
			},
		});
	};
</script>

<style scoped>
	.form-container {
		max-width: 600px;
		margin: 0 auto;
		padding: 20px;
		background-color: #f8f9fa;
		border: 1px solid #dee2e6;
		border-radius: 5px;
	}

	form {
		display: flex;
		flex-direction: column;
	}

	label {
		margin-top: 10px;

	}

	input {
		height: 40px;
		margin-top: 5px;
		text-indent: 1em;
		border: 1px solid #ced4da;
		border-radius: 5px;
	}

	button {
		margin-top: 20px;
		background-color: #007bff;
		color: white;
		border: none;
		border-radius: 5px;
		cursor: pointer;
		transition: background-color 0.3s ease;
	}

	button:hover {
		background-color: #0056b3;
	}
	.error-message
	{
		color:#ff0000;
		font-size: 12px;
	}
</style>